import { CSSProperties, ReactNode, useMemo } from 'react'
import { Popup } from '@taroify/core'
import Taro from "@tarojs/taro"

interface IProps {
  isOpen: boolean
  style?: CSSProperties
  rounded?: boolean
  children: ReactNode
  onClose: () => void
  closeable?: boolean
  isTab?: boolean
}

export const BottomPopup = ({ isOpen, style, isTab, rounded = true, onClose, children, closeable }: IProps) => {
  const paddingBottom = useMemo(() => {
    const systemInfo = Taro.getSystemInfoSync()
    const { bottom } = systemInfo.safeArea
    return systemInfo.screenHeight - (bottom ?? systemInfo.screenHeight) + (isTab ? 44 : 0)
  }, [isTab])

  return (
    <Popup open={isOpen} rounded={rounded} placement='bottom' onClose={onClose} style={{ paddingBottom, ...style, }}>
      <Popup.Backdrop closeable={closeable} />
      {children}
    </Popup>
  );
}
